<script setup>
  const props = defineProps({
    value: {
      type: Boolean
    }
  })
</script>

<template>
  <div role="switch" aria-checked="true" class="el-switch" :class="{'is-checked': value}">
    <span
      class="el-switch__core"
      style="--width: 30px; --height: 16px;">

    </span>
  </div>
</template>

<style scoped lang="scss">

.el-switch {

  &.is-checked {
    .el-switch__core {
      border-color: rgb(0, 91, 245);
      background-color: rgb(0, 91, 245);
      &:after {
        left: 100%;
        transform: translateX(calc(-100% - 1px));
      }
    }
  }

  .el-switch__core {

    & {
      margin: 0;
      display: inline-block;
      position: relative;
      width: 30px;
      min-width: 30px;
      height: 16px;
      border: 1px solid #dcdfe6;
      outline: 0;
      border-radius: 10px;
      box-sizing: border-box;
      background: #dcdfe6;
      cursor: pointer;
      transition: border-color .3s, background-color .3s;
      vertical-align: middle;
    }
    &:after {
      content: "";
      position: absolute;
      top: 1px;
      left: 1px;
      border-radius: 100%;
      transition: all .3s;
      width: calc(var(--height) - 4px);
      height: calc(var(--height) - 4px);
      background-color: #fff;
    }


  }
}



</style>